<template>
  <!-- <div> -->
  <div class="LinewEcharts3" v-loading="loading">
    <div id="Line3"></div>
  </div>
  <!-- </div> -->
</template>

<script setup lang="ts">
import { Eleme } from "@element-plus/icons-vue";

import { getMonth } from "@/request/comment";
const echart = inject("echart");
let myChart = null;
let page = ref(1);
const loading = ref(true);
let GaugeView2_list = ref([]);
const props = defineProps({
  width: {
    type: String,
    default: "100%"
  },
  height: {
    type: String,
    default: "300px"
  },
  city_list: {
    type: String,
    default: ""
  }
});

onMounted(() => {
  // initEcharts();
  // getData();
  // console.log(props.city_id_list);
});
onUnmounted(() => {
  if (myChart.isDisposed) {
    myChart.clear();
    myChart.dispose();
    myChart = null;
  }
});

const getData = async item => {
  // const result = {};
  GaugeView2_list.value = []
  await getMonth({
    // page: page.value,
    // list_id: 272
    list_id: item
  }).then((res) => {
    let { data, status, message } = res;
    if (status != 201) {
      data.forEach(item => {
        GaugeView2_list.value.push(item);
      });
      setTimeout(() => {
        renderEcharts(GaugeView2_list.value);
        loading.value = false;
      }, 2000);
    } else {
      ElMessage({
        message: message,
        type: "warning"
      });
      loading.value = false;
    }
  });
};

const initEcharts = () => {
  myChart = echart.init(document.getElementById("Line3"));
};
const renderEcharts = (echartdata: any) => {
  // loading.value = false;
  var colorList = [
    "#ff7f50",
    "#87cefa",
    "#873efa",
    "#da70d6",
    "#32cd32",
    "#6495ed",
    "#ff69b4",
    "#ba55d3",
    "#cd5c5c",
    "#ffa500",
    "#40e0d0",
    "#1e90ff",
    "#ff6347",
    "#7b68ee",
    "#d0648a",
    "#ffd700",
    "#6b8e23",
    "#4ea397",
    "#3cb371",
    "#b8860b",
    "#7bd9a5"
  ];
  var monthList = [
    "一月",
    "二月",
    "三月",
    "四月",
    "五月",
    "六月",
    "七月",
    "八月",
    "九月",
    "十月",
    "十一月",
    "十二月"
  ];
  var bardata: Array<any> = [];
  var radardata: Array<any> = [];
  echartdata.forEach((item, index) => {
    var data: Object = {};
    data.value = item.COMMENT_COUNT+30+Math.floor(Math.random() * 80) + 1;;
    data.name = monthList[index];
    data.itemStyle = {};
    data.itemStyle.color = colorList[index];
    bardata.push(data);
    var raddata = {};
    raddata.name = monthList[index];
    raddata.max = item.COMMENT_COUNT+50 * 1 +30 +Math.floor(Math.random() * 80) + 1;
    radardata.push(raddata);
  });
  // console.log(bardata);
  // console.log(radardata);
  // { value: 5, name: "衬衫", itemStyle: { color: "#C1232B" } },
  let xdata = bardata.map(v => v.name);
  let ydata = bardata.map(v => v.value);
  myChart.setOption({
    backgroundColor: "#040042",
    title: {
      text: "2023年旅游人数趋势",
      textStyle: {
        align: "center",
        color: "#FA0326",
        fontSize: 20
      },
      // top: "5%",
      left: "right"
    },
    tooltip: {},
    grid: {
      left: "1%",
      right: "15%",
      bottom: "5%",
      // height: "100%",
      width: "70%",
      containLabel: true
    },
    legend: {
      itemGap: 50,
      data: ["新增总量", "最新旅游量"],
      textStyle: {
        color: "#f9f9f9",
        borderColor: "#fff"
      }
    },
    radar: {
      // shape: 'circle',
      center: ["85%", "50%"],
      radius: "50%",
      startAngle: 90,
      splitNumber: 4,
      shape: "circle",
      splitArea: {
        areaStyle: {
          color: ["transparent"]
        }
      },
      axisLabel: {
        show: false,
        fontSize: 18,
        color: "#fff",
        fontStyle: "normal",
        fontWeight: "normal"
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "grey" //
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "grey" //
        }
      },
      indicator: radardata
    },
    xAxis: [
      {
        type: "category",

        // data: xdata,
        axisLine: {
          show: true,
          lineStyle: {
            width: 2,
            color: "#2B7BD6"
          }
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          fontSize: 14,
          rotate: 25,
          // textStyle: {
          color: "#33FFFF"
        },
        data: xdata
      }
    ],
    yAxis: [
      {
        type: "value",
        min: 0,
        // max: 140,
        splitNumber: 7,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#0a3256"
          }
        },
        axisLine: {
          show: false
        },
        axisLabel: {
          margin: 20,
          textStyle: {
            color: "#d1e6eb"
          }
        },
        axisTick: {
          show: false
        }
      }
    ],
    series: [
      {
        name: "最新旅游量",

        type: "bar",
        barWidth: 20,
        z: 20,
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        //   }
        // },
        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#fff"
          }
        },
        itemStyle: {
          normal: {
            // barBorderRadius: 5,
            color: new echart.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#14c8d4"
              },
              {
                offset: 1,
                color: "#43eec6"
              }
            ])
          }
        },
        data: ydata
      },
      {
        name: "新增总量",
        type: "line",
        // smooth: true, //是否平滑曲线显示
        // 			symbol:'circle',  // 默认是空心圆（中间是白色的），改成实心圆
        showAllSymbol: true,
        symbol: "emptyCircle",
        symbolSize: 6,
        lineStyle: {
          normal: {
            color: "#28ffb3" // 线条颜色
          },
          borderColor: "#f0f"
        },
        markPoint: {
          data: [
            { type: "max", name: "最大值" },
            { type: "min", name: "最小值" }
          ]
        },
        markLine: {
          data: [{ type: "average", name: "平均值" }]
        },

        label: {
          show: true,
          position: "top",
          textStyle: {
            color: "#fff"
          }
        },
        itemStyle: {
          normal: {
            color: "#28ffb3"
          }
        },
        // tooltip: {
        //   show: false
        // },
        areaStyle: {
          //区域填充样式
          normal: {
            //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
            color: new echart.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(0,154,120,1)"
                },
                {
                  offset: 1,
                  color: "rgba(0,0,0, 0)"
                }
              ],
              false
            ),
            shadowColor: "rgba(53,142,215, 0.9)", //阴影颜色
            shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
          }
        },
        data: ydata
      },
      {
        name: "访问来源",
        type: "radar",
        center: ["90%", "45%"],
        tooltip: {
          show: true,
          trigger: "item"
        },
        // tooltip: {},
        //          data:['衬衫','羊毛衫','雪纺衫','裤子','高跟鞋','袜子']
        //          data: [5, 20, 36, 10, 10, 20]
        z: 20,
        data: [
          {
            value: ydata
          }
        ],
        symbol: "circle",
      symbolSize: 10,
      itemStyle: {
        normal: {
          color: "rgba(19, 173, 255, 1)",
          borderColor: "rgba(19, 173, 255, 0.4)",
          borderWidth: 10,
        },
      },
      areaStyle: {
        normal: {
          shadowBlur: 13,
          shadowColor: "rgba(0,0,0,.2)",
          shadowOffsetX: 0,
          shadowOffsetY: 10,
          opacity: 0.8,
        },
      },
      lineStyle: {
        normal: {
          color: "rgba(19, 173, 255, 1)",
          width: 2,
          type: "dashed",
        },
      },
      }
    ]
  });
};

watch(
  () => props.city_list,
  (newValue, oldValue) => {
    if (newValue) {
      console.log(newValue);

      initEcharts();
      getData(newValue);
    }
  }
);
window.addEventListener("resize", () => {
  //监听浏览器大小去改变图表尺寸
  myChart.resize();
});
</script>

<style scoped>
.LinewEcharts3 {
  height: 100%;
  width: 100%;
  /* height: 500px; */
  /* background-color: aliceblue; */
}

#Line3 {
  height: 100%;
  width: 100%;
  /* background-color: aliceblue; */
}
</style>